.w{
    width: 1400px;
    margin: 0 auto;
}
img{
    width: 100%;
    height: 100%;
    border-radius: 7px;
}
p{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
body{
    background-color: #f5f5f5;
}
.selectedType{
    background: #ff9966;  /* fallback for old browsers */    
    background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));  /* Chrome 10-25, Safari 5.1-6 */     
     background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
     color: #ffffff;
}
.orderType{
    background: #ee0979;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
    color: #ffffff !important;
}
.songList{
    margin-top: 100px;
    padding: 50px 0 ;
    .changType{
        font-size: 14px;
        height: 50px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        background-color: #ffffff;
        .allChangType{
            background: #ff9966;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
            border-radius: 10px;
            text-align: center;
            width: 100px;
            color: white;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            margin:0 15px;
            position: relative;
            span{
                margin-right: 5px;
            }
           .changTypeHiddenBox{
               position: absolute;
               background-color: #ffffff;
               box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);
               width: 700px;
               height: 400px;
               top: 60px;
               border-radius: 7px;
               overflow: scroll;
               left: 0;
               z-index: 14;
               .type-item{
                   padding: 20px;
                   .type-title{
                       display: flex;
                       align-items: center;

                       .img-box{
                        width: 30px;
                        height: 30px;
                        margin-right: 5px;
                        img{
                            border-radius: 0px;
                        }
                       }
                       .title-text{
                        font-size: 15px;
                        color: #3a3a3a;
                        font-weight: 800;
                       }
                   }
                   .type-tag{
                       ul{
                           display: flex;
                           flex-wrap: wrap;
                           align-items: center;
                           li{
                             
                               padding: 0px 17px;
                               background: #6190e8;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(97, 144, 232), rgb(167, 191, 232));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(97, 144, 232), rgb(167, 191, 232)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                               color: #ffffff;
                               margin: 5px;
                               border-radius: 20px;
                               height: 37px;
                               text-align: center;
                               line-height: 37px;
                               transition: all 0.2s;
                               &:hover{
                                background: #ff9966;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                                   color: #e9e7ef;
                               }
                           }
                       }
                   }
               }
           }
        }
        .changTypeTags{
            display: flex;
            align-items: center;
            color: #3a3a3a;
            font-size: 14px;
            .changTypeTags-title{
               
            }
           ul{
               li{
                   float: left;
                   height: 40px;
                   line-height: 40px;
                   border-radius: 10px;
                   padding: 0 25px;
                   cursor: pointer;
                   margin-right: 10px;
                   &:hover{
                    background: #ff9966;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(255, 153, 102), rgb(255, 94, 98)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                       color: #ffffff;
                   }
               }
           }
        }
        .sortingType{
            width: 200px;
            margin-left: 10px;
            ul{
                display: flex;
                align-items: center;
                justify-content: center;
                li{
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    margin: 0 10px;
                    padding: 0 10px;
                    color: #3a3a3a;
                    cursor: pointer;
                    border-radius: 10px;
                    &:hover{
                        background: #ee0979;  /* fallback for old browsers */      background: -webkit-linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(238, 9, 121), rgb(255, 106, 0)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
                           color: #ffffff;
                       }
                }
            }
        }
    }
    .songList-box{
        overflow: hidden;
         padding-top: 15px;
         .songList-item{
             width: 150px;
             height: 183px;
             float: left;
             margin:0 50px 30px 0;
           
             .img-box{
                 width: 150px;
                 height: 150px;
                 position: relative;
                 cursor: pointer;
                img{
                  
                position: relative;
                 z-index: 8;
                
                } &::after,&::before{
                 content: "";
                 width: 87%;
                 height: 87%;
                 background-color: rgba(225, 225, 231, 0.9);
                 position: absolute;
                 top: 14px;
                 right: -6px;
                 z-index: 1;
                 transition: all 0.4s;
                 border-radius: 2px;
             }
             &::before{
                 width: 77%;
                 height: 77%;
                 position: absolute;
                 background-color: #d5d5d5;
                 top: 22px;
                 right: -10px;
             }
             &:hover{
                 &::before{
                     position: absolute;
                     right: -18px;
                     background-color: rgba(218, 212, 212, 0.7);
                 }
                 &::after{
                     position: absolute;
                     right: -10px;
                     background-color: rgba(241, 171, 171, 0.7);
                 }
             }
             .playCount{
                position: absolute;
                z-index: 13;
                width: 70px;
                height: 25px;
                line-height: 25px;
                background-color: rgba(2, 10, 18, 0.7);
                color: #ffffff;
                top: 0;
                right: 0;
                border-radius:20px;
                font-size: 13px;
                text-align: center;
             }
             }
             .content-box{
                 height: 33px;
                 line-height: 33px;
                 color: #4a4a4a;
                 font-weight: 800;
                 font-size: 15px;
             }
             
         }
         
     }
     .page-box{
         height: 100px;
         display: flex;
         align-items: center;
         justify-content: center;
         
     }
}